<template>
	<div class="boss">
		<p>当月的产量分布信息</p>
		<div class="big">
			<div id="aaa"></div>
			<div id="bbb"></div>
			<div id="ccc"></div>
		</div>
	</div>

</template>

<script>
	// import axios from 'axios'
	import * as echarts from 'echarts';
	export default {
		mounted() {
			this.echartsTop()
		},
		methods: {
			echartsTop() {
				var echart = echarts.init(document.getElementById("aaa"));
				var option = {
					title: {
						text: '规格数据统计',
						subtext: '按照规则',
						left: 'center'
					},
					tooltip: {
						trigger: 'item'
					},
					legend: {
						orient: 'vertical',
						left: 'left'
					},
					series: [{
						name: '产量统计',
						type: 'pie',
						radius: '50%',
						data: [{
								value: 335,
								name: 'AAAAA',
								itemStyle: {
									color: "#c23531"
								},
								label: {
									color: "#c23531"
								}
							},
							{
								value: 310,
								name: 'BBBBB',
								itemStyle: {
									color: "#2f4554"
								},
								label: {
									color: "#2f4554"
								}
							},
							{
								value: 234,
								name: 'CCCCC',
								itemStyle: {
									color: "#61a0a8"
								},
								label: {
									color: "#61a0a8"
								}
							},
							{
								value: 135,
								name: 'DDDDD',
								itemStyle: {
									color: "#d48265"
								},
								label: {
									color: "#d48265"
								}
							},
							{
								value: 1548,
								name: 'EEEEE',
								itemStyle: {
									color: "#91c7ae"
								},
								label: {
									color: "#91c7ae"
								}
							}
						],
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				};
				echart.setOption(option);
				var echart1 = echarts.init(document.getElementById("bbb"));
				var option1 = {
					title: {
						text: '按照设备统计',
						subtext: '按照信息',
						left: 'center'
					},
					tooltip: {
						trigger: 'item'
					},
					legend: {
						orient: 'vertical',
						left: 'left'
					},
					series: [{
						name: '产量统计',
						type: 'pie',
						radius: '50%',
						data: [{
								value: 235,
								name: '硫化机1#',
								itemStyle: {
									color: "#c23531"
								},
								label: {
									color: "#c23531"
								}
							},
							{
								value: 110,
								name: '硫化机2#',
								itemStyle: {
									color: "#2f4554"
								},
								label: {
									color: "#2f4554"
								}
							},
							{
								value: 334,
								name: '硫化机3#',
								itemStyle: {
									color: "#61a0a8"
								},
								label: {
									color: "#61a0a8"
								}
							},
							{
								value: 235,
								name: '硫化机4#',
								itemStyle: {
									color: "#d48265"
								},
								label: {
									color: "#d48265"
								}
							},
							{
								value: 448,
								name: '硫化机5#',
								itemStyle: {
									color: "#91c7ae"
								},
								label: {
									color: "#91c7ae"
								}
							}
						],
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				};
				echart1.setOption(option1);
				var echart2 = echarts.init(document.getElementById("ccc"));
				var option2 = {
					title: {
						text: '规格产线统计',
						subtext: '按照信息',
						left: 'center'
					},
					tooltip: {
						trigger: 'item'
					},
					legend: {
						orient: 'vertical',
						left: 'left'
					},
					series: [{
						name: '产量统计',
						type: 'pie',
						radius: '50%',
						data: [{
								value: 435,
								name: '生产线1#',
								itemStyle: {
									color: "#c23531"
								},
								label: {
									color: "#c23531"
								}
							},
							{
								value: 210,
								name: '生产线2#',
								itemStyle: {
									color: "#2f4554"
								},
								label: {
									color: "#2f4554"
								}

							},
							{
								value: 134,
								name: '生产线3#',
								itemStyle: {
									color: "#61a0a8"
								},
								label: {
									color: "#61a0a8"
								}
							},
							{
								value: 435,
								name: '生产线4#',
								itemStyle: {
									color: "#d48265"
								},
								label: {
									color: "#d48265"
								}
							},
						],
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				};
				echart2.setOption(option2);
			},

		},
	}
</script>

<style scoped lang="scss">
	.boss {
		background-color: #fff;
		margin-top: 20px;
		border-top: 4px solid #007300;
		padding: 10px;

		p {
			font-size: 20px;
		}
	}

	.big {
		display: flex;

		flex-wrap: wrap;

		#ccc,
		#aaa,
		#bbb {
			height: 300px;
			width: 530px;
			padding: 10px;
		}
	}
</style>
